<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
        <vab-card>
          <el-tree
            ref="treeRef"
            :data="dataJSON"
            default-expand-all
            highlight-current
            node-key="route"
            :current-node-key="currentNodeKey.route"
            @node-click="handleNodeClick"
          />
        </vab-card>
      </el-col>
      <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
        <!-- <vab-card v-for="(row, i) in dataJSON" :key="i" :id="`${row.route}`">
          <header>
            <img
              class="hostPreview"
              :src="`${ossURlZjk}/dms/admin/home/${childList[0].name}/${childList[0].icon}.png`"
              alt=""
              srcset=""
            />
            <aside class="event">
              <div v-for="(item, i) in childList" :key="i">
                <span v-if="i" @click="handlePlan(item.icon)"></span>
              </div>
            </aside>
          </header>
        </vab-card> -->
        <section v-for="(row, i) in dataJSON" :key="i">
          <aside
            v-for="(item, j) in row.children"
            :key="j"
            :id="item.route"
            ref="scrollElements"
          >
            <vab-card>
              <img
                class="hostPreview"
                :src="`${ossURlZjk}/dms/admin/home/${row.route}/${item.icon}.png`"
                alt=""
                srcset=""
              />
            </vab-card>
          </aside>
        </section>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'GuideIndex',
  })

  import { ossURlZjk } from '~/src/config'
  import { treeJSON } from './components/index.ts'

  const treeRef = ref()
  const scrollElements = ref()

  const dataJSON: any = treeJSON()
  const route = { label: '需求提报' }

  const currentNodeKey = ref<any>()
  const childList = ref<any[]>([])

  for (let i = 0; i < dataJSON.length; i++) {
    const row = dataJSON[i]
    if (row.label == route.label) childList.value = row.children
  }

  currentNodeKey.value = childList.value[0]

  /**
   *
   * @method
   */
  const handleNodeClick = (node: any) => {
    const i = getNodeIndex(node)

    handlePlan(i)
    console.log(getNodeIndex(node))
  }

  const getNodeIndex = (node: any) => {
    const flattenNodes = treeRef.value.store.nodesMap
    const flattened = Object.keys(flattenNodes).map((key) => flattenNodes[key])
    return flattened.findIndex((n) => n.data.route === node.route)
  }

  //跳转指定位置
  const handlePlan = (i: number) => {
    // console.log(document.getElementById(id))

    // const scrollElem: any = document.getElementById(id)

    // console.log(scrollElem)

    // scrollElem?.scrollTo({ top: scrollElem?.scrollHeight, behavior: 'smooth' })

    // return

    if (scrollElements.value[i]) {
      scrollElements.value[i].scrollIntoView()
    }

    // document.getElementById(id)?.scrollIntoView({
    //   behavior: 'smooth',
    //   block: 'end',
    //   inline: 'nearest',
    // })
  }
</script>

<style lang="scss" scoped>
  .box {
    header {
      position: relative;
      .event {
        position: absolute;
        left: 126px;
        top: 206px;
        width: 806px;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 402px;
          height: 32px;
          // background-color: #000;
          margin-bottom: 26px;
          cursor: pointer;
        }
      }
    }
    .hostPreview {
      display: inline-block;
      width: 100%;
    }
  }

  @media screen and (max-width: 1440px) {
    header {
      position: relative;
      .event {
        position: absolute;
        left: 92px !important;
        top: 152px !important;
        width: 582px !important;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 290px !important;
          height: 26px !important;
          // background-color: #000 !important;
          margin-bottom: 10px !important;
        }
      }
    }
  }
</style>
./components
